<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import JsonViewer from './components/JsonViewer.vue'
import JsonInput from './components/JsonInput.vue'
import JsonStreamingHeader from './components/JsonStreamingHeader.vue'

// 存储JSON数据
const jsonData = ref<any>(null)

// 处理JSON输入
const handleJsonInput = (data: any) => {
  try {
    jsonData.value = data
    ElMessage.success('JSON数据已加载')
  } catch (error) {
    ElMessage.error('JSON数据处理失败')
    console.error(error)
  }
}

// 示例数据
const loadExampleData = () => {
  const example = {
    name: 'JSON Streaming',
    version: '1.0.0',
    features: ['JSON解析', '实时流处理', '可视化展示'],
    config: {
      autoSave: true,
      theme: 'dark',
      maxDepth: 10
    }
  }
  jsonData.value = example
  ElMessage.success('示例数据已加载')
}

onMounted(() => {
  loadExampleData()
})
</script>

<template>
  <div class="app-container">
    <JsonStreamingHeader />
    
    <div class="main-content">
      <div class="input-section">
        <JsonInput @json-input="handleJsonInput" />
      </div>
      
      <div class="viewer-section">
        <JsonViewer :json-data="jsonData" />
      </div>
    </div>
  </div>
</template>

<style>
@import 'element-plus/dist/index.css';

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  box-sizing: border-box;
}

.main-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1;
  overflow: hidden;
}

.input-section, .viewer-section {
  flex: 1;
  overflow: auto;
  background-color: #1e1e1e;
  border-radius: 8px;
  padding: 16px;
}

@media (min-width: 768px) {
  .main-content {
    flex-direction: row;
  }
}
</style>
